现在一直看到有关于微信小程序的问题,我也来看看这个是怎么弄的 我是以个人的身份开注册是微信小程序
1.点击微信公众平台里面的注册,就会看到有四个账号类型,点击小程序,然后看到这个页面
填写完整自己的信息,就注册完成了!
注意:在填写小程序名字的时候要想好,因为这个名字在发布之后,就不能更改了
2,登录微信小程序
在首页看到的是这个页面,然后看流程那儿,很清楚的说明了之后应该执行哪几步
流程走完之后,就进入了开发阶段,我们可以看一下官方的文档(https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=2017712),这里面包括了大部分的组件 框架 api等,基本满足我们的需求。现在介绍几个构成一个页面:
就只是写了一个页面
1.轮播图
htmljsPage({ data: { imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' ], indicatorDots: false, autoplay: false, interval: 5000, duration: 1000, hasLocation: false }, changeIndicatorDots: function (e) { this.setData({ indicatorDots: !this.data.indicatorDots }) }, changeAutoplay: function (e) { this.setData({ autoplay: !this.data.autoplay }) }, intervalChange: function (e) { this.setData({ interval: e.detail.value }) }, durationChange: function (e) { this.setData({ duration: e.detail.value }) },});cssimage{width:100%}
2.分类
htmlcss.sort .flex-item { width:25%; height:60px; line-height:60px; text-align:center; float:left; background:#e9f0fa}.sort .active{ background:#dfe5ef} 美食 甜点 工作餐 夜宵
3.获取当前位置
htmljs//获取经纬度 getLocation: function (e) { console.log(e) var that = this wx.getLocation({ type: 'gcj02', //返回可以用于wx.openLocation的经纬度 success: function (res) { var latitude = res.latitude var longitude = res.longitude wx.openLocation({ latitude: latitude, longitude: longitude, scale: 28 }) } }) },
官方文档写的还是很清楚的
3.页面之间的跳转,要设置一下路由,在写之前要先看清楚官方的文档
从index跳转到detail并且获取到从index传给detail的参数 这里面用的navigator并且渲染的时候用的是一个类似于vuejs中的v-for指令,然后再datail中用onLoad函数中的options获取到传递的参数
在index中
htmljspage中的data中 listImage:[ {mark:'one',src:'././image/1.jpeg'}, { mark: 'two',src: '././image/2.jpeg'}, { mark: 'three', src: '././image/3.png' }, { mark: 'four',src: '././image/4.png' }, { mark: 'five', src: '././image/5.jpeg' }, { mark: 'six', src: '././image/6.png' }, ] },
在app.json中
{ "pages":[ "pages/index/index", "pages/logs/logs", "pages/concat/index", "pages/index/detail/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}
在detail中
htmljsPage({ data: { mark:0 }, onLoad:function(options){ this.setData({ mark: options.mark }) }}) { {mark}}